import React from 'react';
import { Form, Input, TreeSelect, Button, Card, message } from 'antd';
import KPageHeader from '@/components/KPageHeader';
import Editor from '@/components/Editor';
import { history } from 'umi';
import { apiGetArticle, apiPostArticle } from '@/api/article.api';
import { PageLoading } from '@ant-design/pro-layout';
import useRequest from '@/hooks/useKRequest';
import { Category } from '@/pages/article/category';
import { useModel } from '@@/plugin-model/useModel';

interface FormProps {
  id: number | null;
  categories: Category[];
  // onSubmit: () => void;
}

export default (props: FormProps) => {
  const [form] = Form.useForm();
  const { loading } = useRequest(apiGetArticle, {
    params: props.id,
    isRun: !!props.id,
    onSuccess: (result: any) => {
      const fields: any[] = [];

      for (let name in result.data) {
        fields.push({
          name: name,
          value: result.data[name],
        });
      }
      form.setFields(fields);
    },
  });
  const { data: categoies } = useModel('category');
  const { run: onSubmit, loading: subing } = useRequest(apiPostArticle, {
    params: {
      id: props.id,
    },
    lazy: true,
    onSuccess: (data: any) => {
      message.success('保存成功');
    },
  });

  return loading ? (
    <PageLoading />
  ) : (
    <Card style={{ display: props.id === null ? 'none' : 'block' }}>
      <KPageHeader
        id={'page-header'}
        title={props.id ? '编辑文章' : '发布新文章'}
        back={() => {
          history.goBack();
        }}
      />

      <Form
        form={form}
        layout={'vertical'}
        onFinish={onSubmit}
        onFinishFailed={(params: any) => {
          const first = params.errorFields[0].name[0];
          const el = document.querySelector(`[for="${first}"]`);
          const header = document.getElementById('page-header');
          if (el && header) {
            window.scrollTo(0, (el as any).offsetParent.offsetTop);
          }
        }}
      >
        <Form.Item
          name={'cate_id'}
          label={'所属分类'}
          rules={[{ required: true }]}
        >
          <TreeSelect
            treeData={categoies}
            placeholder={'选择分类'}
            treeDefaultExpandAll={true}
          />
        </Form.Item>

        <Form.Item
          label={'文章标题'}
          name={'title'}
          rules={[{ required: true }, { max: 128 }]}
        >
          <Input autoComplete={'off'} />
        </Form.Item>

        <Form.Item
          label={'副标题'}
          name={'subtitle'}
          rules={[{ required: true }, { max: 255 }]}
        >
          <Input autoComplete={'off'} />
        </Form.Item>

        <Form.Item label={'关键字'} name={'keyword'} rules={[{ max: 255 }]}>
          <Input autoComplete={'off'} />
        </Form.Item>

        <Form.Item
          label={'正文内容'}
          name={'content'}
          rules={[{ required: true }]}
        >
          <Editor />
        </Form.Item>

        <Button type={'primary'} htmlType={'submit'} loading={subing}>
          保存
        </Button>
      </Form>
    </Card>
  );
};
